﻿@{
    //page title
    ViewBag.Title = T("Admin.Configuration.Countries").Text;
}
<div class="section-header">
    <div class="title">
        <img src="@Url.Content("~/Administration/Content/images/ico-configuration.png")" alt="" />
        @T("Admin.Configuration.Countries")
    </div>
    <div class="options">
        <a href="@Url.Action("Create")" class="k-button">@T("Admin.Common.AddNew")</a>
        <input type="button" id="publish-selected" class="k-button" value="@T("Admin.Configuration.Countries.PublishSelected")" />
        <input type="button" id="unpublish-selected" class="k-button" value="@T("Admin.Configuration.Countries.UnpublishSelected")" />
        <a href="@Url.Action("ExportCsv")" class="k-button">@T("Admin.Configuration.Countries.ExportToCsv")</a>
        <input type="submit" id="importcsv" name="importcsv" class="k-button" value="@T("Admin.Configuration.Countries.ImportFromCsv")" />
    </div>
</div>
<table class="adminContent">
    <tr>
        <td>
            <div id="countries-grid"></div>

            <script>
                $(document).ready(function () {
                    $("#countries-grid").kendoGrid({
                        dataSource: {
                            type: "json",
                            transport: {
                                read: {
                                    url: "@Html.Raw(Url.Action("CountryList", "Country"))",
                                    type: "POST",
                                    dataType: "json"
                                }
                            },
                            schema: {
                                data: "Data",
                                total: "Total",
                                errors: "Errors"
                            },
                            error: function (e) {
                                display_kendoui_grid_error(e);
                                // Cancel the changes
                                this.cancelChanges();
                            },
                            serverPaging: true,
                            serverFiltering: true,
                            serverSorting: true
                        },
                        pageable: {
                            refresh: true,
                            numeric: false,
                            previousNext: false,
                            info: false
                        },
                        scrollable: false,
                        dataBound: onDataBound,
                        columns: [{
                            field: "Id",
                            headerTemplate: "<input id='mastercheckbox' type='checkbox'/>",
                            headerAttributes: { style: "text-align:center" },
                            attributes: { style: "text-align:center" },
                            template: "<input type='checkbox' value='#=Id#' class='checkboxGroups'/>",
                            width: 50
                        }, {
                            field: "Name",
                            title: "@T("Admin.Configuration.Countries.Fields.Name")",
                            width: 300
                        }, {
                            field: "AllowsBilling",
                            title: "@T("Admin.Configuration.Countries.Fields.AllowsBilling")",
                            width: 100,
                            headerAttributes: { style: "text-align:center" },
                            attributes: { style: "text-align:center" },
                            template: '<img src="@Url.Content("~/Administration/Content/images/")active-#=AllowsBilling#.gif" />'
                        }, {
                            field: "AllowsShipping",
                            title: "@T("Admin.Configuration.Countries.Fields.AllowsShipping")",
                            width: 100,
                            headerAttributes: { style: "text-align:center" },
                            attributes: { style: "text-align:center" },
                            template: '<img src="@Url.Content("~/Administration/Content/images/")active-#=AllowsShipping#.gif" />'
                        }, {
                            field: "TwoLetterIsoCode",
                            title: "@T("Admin.Configuration.Countries.Fields.TwoLetterIsoCode")",
                            width: 100
                        }, {
                            field: "ThreeLetterIsoCode",
                            title: "@T("Admin.Configuration.Countries.Fields.ThreeLetterIsoCode")",
                            width: 100
                        }, {
                            field: "NumericIsoCode",
                            title: "@T("Admin.Configuration.Countries.Fields.NumericIsoCode")",
                            width: 100
                        }, {
                            field: "SubjectToVat",
                            title: "@T("Admin.Configuration.Countries.Fields.SubjectToVat")",
                            width: 100,
                            headerAttributes: { style: "text-align:center" },
                            attributes: { style: "text-align:center" },
                            template: '<img src="@Url.Content("~/Administration/Content/images/")active-#=SubjectToVat#.gif" />'
                        }, {
                            field: "NumberOfStates",
                            title: "@T("Admin.Configuration.Countries.Fields.NumberOfStates")",
                            width: 100
                        }, {
                            field: "DisplayOrder",
                            title: "@T("Admin.Configuration.Countries.Fields.DisplayOrder")",
                            width: 100
                        }, {
                            field: "Published",
                            title: "@T("Admin.Configuration.Countries.Fields.Published")",
                            width: 100,
                            headerAttributes: { style: "text-align:center" },
                            attributes: { style: "text-align:center" },
                            template: '<img src="@Url.Content("~/Administration/Content/images/")active-#=Published#.gif" />'
                        }, {
                            field: "Id",
                            title: "@T("Admin.Common.Edit")",
                            width: 50,
                            template: '<a href="Edit/#=Id#">@T("Admin.Common.Edit")</a>'
                        }]
                    });
                });
            </script>
        </td>
    </tr>
</table>

<script type="text/javascript">
        var selectedIds = [];

        $(document).ready(function () {

            //"publish selected" button
            $('#publish-selected').click(function (e) {
                e.preventDefault();

                var postData = {
                    selectedIds: selectedIds
                };

                $.ajax({
                    cache:false,
                    type: "POST",
                    url: "@(Url.Action("PublishSelected", "Country"))",
                    data: postData,
                    complete: function (data) {
                        //reload grid
                        var grid = $('#countries-grid').data('kendoGrid');
                        grid.dataSource.read();
                    },
                    error:function (xhr, ajaxOptions, thrownError){
                        alert(thrownError);
                    },
                    traditional: true
                });
                return false;
            });
            
            //"unpublish selected" button
            $('#unpublish-selected').click(function (e) {
                e.preventDefault();

                var postData = {
                    selectedIds: selectedIds
                };

                $.ajax({
                    cache:false,
                    type: "POST",
                    url: "@(Url.Action("UnpublishSelected", "Country"))",
                    data: postData,
                    complete: function (data) {
                        //reload grid
                        var grid = $('#countries-grid').data('kendoGrid');
                        grid.dataSource.read();
                    },
                    error:function (xhr, ajaxOptions, thrownError){
                        alert(thrownError);
                    },
                    traditional: true
                });
                return false;
            });
            
            $('#mastercheckbox').click(function () {
                $('.checkboxGroups').attr('checked', $(this).is(':checked')).change();
            });

            //wire up checkboxes.
            $('#countries-grid').on('change', 'input[type=checkbox][id!=mastercheckbox]', function (e) {
                var $check = $(this);
                if ($check.is(":checked") == true) {
                    var checked = jQuery.inArray($check.val(), selectedIds);
                    if (checked == -1) {
                        //add id to selectedIds.
                        selectedIds.push($check.val());
                    }
                }
                else {
                    var checked = jQuery.inArray($check.val(), selectedIds);
                    if (checked > -1) {
                        //remove id from selectedIds.
                        selectedIds = $.grep(selectedIds, function (item, index) {
                            return item != $check.val();
                        });
                    }
                }
                updateMasterCheckbox();
            });
        });

    function onDataBound(e) {

        $('#countries-grid input[type=checkbox][id!=mastercheckbox]').each(function () {
            var currentId = $(this).val();
            var checked = jQuery.inArray(currentId, selectedIds);
            //set checked based on if current checkbox's value is in selectedIds.
            $(this).attr('checked', checked > -1);
        });

        updateMasterCheckbox();
    }

    function updateMasterCheckbox() {
        var numChkBoxes = $('#countries-grid input[type=checkbox][id!=mastercheckbox]').length;
        var numChkBoxesChecked = $('#countries-grid input[type=checkbox][checked][id!=mastercheckbox]').length;
        $('#mastercheckbox').attr('checked', numChkBoxes == numChkBoxesChecked && numChkBoxes > 0);
    }
</script>

@*import states form*@
<div id="importcsv-window" style="display:none;">
    @using (Html.BeginForm("ImportCsv", "Country", FormMethod.Post, new { enctype = "multipart/form-data" }))
    {
        <table style="text-align:left;">
            <tr>
                <td>
                    @T("Admin.Common.CsvFile"):
                </td>
                <td>
                    <input type="file" id="importcsvfile" name="importcsvfile" />
                </td>
            </tr>
            <tr>
                <td colspan="2">
                    <input type="submit" class="k-button" value="@T("Admin.Common.ImportFromCsv")" />
                </td>
            </tr>
        </table>
    }
</div>
<script type="text/javascript">
    $(document).ready(function () {
        $("#importcsv").click(function (e) {
            e.preventDefault();
            var window = $("#importcsv-window");
            if (!window.data("kendoWindow")) {
                window.kendoWindow({
                    modal: true,
                    width: "400px",
                    title: "@T("Admin.Common.ImportFromCsv")",
                    actions: ["Close"]
                });
            }
            window.data('kendoWindow').center().open();
        });
    });
</script>
